<template>
  <sec-drawer
    size="660px"
    :visible.sync="detailVisible"
    title="详情"
    :modal="true"
    :before-close="handleClose"
    custom-class="drawer-detail-form notice-detail"
    :wrapper-closable="true"
  >
    <div class="drawer-container">
      <sec-descriptions title="角色详情" :column="1">
        <sec-descriptions-item label="角色名称">{{
          rowData.roleName
        }}</sec-descriptions-item>
        <sec-descriptions-item label="用户数">{{
          rowData.count
        }}</sec-descriptions-item>
        <sec-descriptions-item label="创建时间">{{
          rowData.createTime
        }}</sec-descriptions-item>
        <sec-descriptions-item label="角色详情">{{
          rowData.roleDesc
        }}</sec-descriptions-item>
      </sec-descriptions>
    </div>
  </sec-drawer>
</template>

<script>
import moment from 'moment'

export default {
  name: 'DeviceDetailForm',
  components: {},
  props: {
    detailVisible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  watch: {},
  created() {
    this.moment = moment
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('update:detailVisible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.notice-detail {
  .container {
    padding: 0 16px;
  }
  .head {
    border-bottom: 1px solid #f0f0f0;
    h1 {
      font-size: 18px;
      font-weight: bold;
      color: #262626;
      margin: 6px 0;
    }
    p {
      font-size: 14px;
      color: #8c8c8c;
      margin: 12px 0 16px;
    }
  }

  .body {
    p {
      margin: 16px 0;
    }
    margin-top: 10px;
    font-size: 14px;
    color: #262626;
    min-height: 200px;
  }
}
::v-deep {
  .log {
    .el-descriptions__body {
      border: 1px solid;
      padding: 0;
      margin: 16px;
    }
  }
}
</style>
